<template>
  <div class="applyPage">
    <template>
      <el-tabs v-model="currentStatus" type="card" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="处理中" name="1"></el-tab-pane>
        <el-tab-pane label="已办结" name="2"></el-tab-pane>
        <el-tab-pane label="车辆编制查看" name="3">
          <carconfig @finish="fetchData"></carconfig>
        </el-tab-pane>
      </el-tabs>
    </template>
    <div v-if="this.currentStatus != 3">
      <el-row>
        <el-col :sm="8">
          <div class="g-title">申请修改车辆编制（{{total}}个）</div>
        </el-col>
        <el-col :sm="16" style="text-align: right;">
          <el-button type="danger" @click="$refs.addComp.dialogVisible=true" size="small">新增</el-button>
          <el-button type="success" @click="update = true" size="small">本单位编制</el-button>
        </el-col>
      </el-row>
      <br />
      <br />
      <el-table
        ref="multipleTable"
        :border="true"
        :data="listData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :header-cell-style="{background:'#F5F7FA'}"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="申请人" width="100" prop="username" align="center"></el-table-column>
        <el-table-column label="申请单位" prop="companyName" align="center"></el-table-column>
        <el-table-column prop="mark" label="申请原因" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="taskname" label="当前状态" show-overflow-tooltip align="center"></el-table-column>
        <el-table-column prop="createdate" label="提交时间" show-overflow-tooltip align="center"></el-table-column>

        <el-table-column label="操作" width="85" align="center">
          <template slot-scope="scope">
            <el-button type="danger" @click="viewTask(scope.row)" size="small">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="查看申请进度" :visible.sync="show" v-if="opData">
        <div style="padding: 20px;background-color: white;">
          <el-row>
            <el-steps :active="activeStep" align-center>
              <el-step
                :title="item.title"
                :description="item.description"
                v-for="(item, index) in steps"
                :key="index"
              ></el-step>
            </el-steps>
          </el-row>
          <br />
          <br />
          <el-tabs v-model="status" type="card" @tab-click="statusChange">
            <el-tab-pane label="申请信息" name="first">
              <el-row>
                <el-col :span="3">
                  <b style="float: right;">编办文件：</b>
                </el-col>
                <el-col :span="21">
                  <a :href="serverProjectName+opData.bzwjurl">查看</a>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="3">
                  <b style="float: right;">附件：</b>
                </el-col>
                <el-col :span="21">
                  <a :href="serverProjectName+opData.fileurl">查看</a>
                </el-col>
              </el-row>
              <br />
              <el-row>
                <el-col :span="3">
                  <b style="float: right;">修改原因：</b>
                </el-col>
                <el-col :span="21">{{opData.mark}}</el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="申请进度" name="second">
              <br />
              <el-timeline :reverse="reverse">
                <el-timeline-item
                  v-for="(activity, index) in history"
                  :key="index"
                  :timestamp="activity.optime"
                >
                  {{activity.taskName}}
                  <template>
                    <span v-if="activity.passStr">--------- {{activity.passStr}}</span>
                  </template>
                </el-timeline-item>
              </el-timeline>
            </el-tab-pane>
            <el-tab-pane label="编制信息" name="third">
              <br />
              <el-table
                :data="cars"
                style="width: 100%"
                :border="true"
                :header-cell-style="{background:'#F5F7FA'}"
              >
                <el-table-column prop="nature" label="车辆性质"></el-table-column>
                <el-table-column prop="ZZSJGBYC" label="在职省级干部用车"></el-table-column>
                <el-table-column prop="LTXZSJGBYC" label="离退休正省级干部用车"></el-table-column>
                <el-table-column prop="LXFSJGBYC" label="离休副省级干部用车"></el-table-column>
                <el-table-column prop="TXFSJGBYC" label="退休副省级干部用车"></el-table-column>
                <el-table-column prop="DXHSWGWYC" label="定向化实物保障岗位用车"></el-table-column>
                <el-table-column prop="JYTXYC" label="机要通信用车"></el-table-column>
                <el-table-column prop="YJBZYC" label="应急用车"></el-table-column>
                <el-table-column prop="JYTXYYJHYYC" label="机要通信与应急合一用车"></el-table-column>
                <el-table-column prop="LTXGBGLJGYC" label="离退休干部管理机构用车"></el-table-column>
                <el-table-column prop="DYSCDCYC" label="调研视察督察用车"></el-table-column>
                <el-table-column prop="ZWJDYC" label="政务接待用车"></el-table-column>
                <el-table-column prop="ZFZQYC" label="执法执勤用车"></el-table-column>
                <el-table-column prop="TZZYJSYC" label="特种专业技术用车"></el-table-column>
                <el-table-column prop="YWYC" label="业务用车"></el-table-column>
                <el-table-column prop="BC" label="班车"></el-table-column>
                <el-table-column prop="HQFWYC" label="后勤服务用车"></el-table-column>
                <el-table-column prop="QTYC" label="其他用车"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>

      <el-dialog title="修改单位车辆编制" :visible.sync="update">
        <div style="padding: 20px;background-color: white;">
          <el-table
            :data="cars"
            style="width: 100%"
            :border="true"
            :header-cell-style="{background:'#F5F7FA'}"
          >
            <el-table-column prop="nature" label="车辆性质"></el-table-column>
            <el-table-column prop="ZZSJGBYC" label="在职省级干部用车"></el-table-column>
            <el-table-column prop="LTXZSJGBYC" label="离退休正省级干部用车"></el-table-column>
            <el-table-column prop="LXFSJGBYC" label="离休副省级干部用车"></el-table-column>
            <el-table-column prop="TXFSJGBYC" label="退休副省级干部用车"></el-table-column>
            <el-table-column prop="DXHSWGWYC" label="定向化实物保障岗位用车"></el-table-column>
            <el-table-column prop="JYTXYC" label="机要通信用车"></el-table-column>
            <el-table-column prop="YJBZYC" label="应急用车"></el-table-column>
            <el-table-column prop="JYTXYYJHYYC" label="机要通信与应急合一用车"></el-table-column>
            <el-table-column prop="LTXGBGLJGYC" label="离退休干部管理机构用车"></el-table-column>
            <el-table-column prop="DYSCDCYC" label="调研视察督察用车"></el-table-column>
            <el-table-column prop="ZWJDYC" label="政务接待用车"></el-table-column>
            <el-table-column prop="ZFZQYC" label="执法执勤用车"></el-table-column>
            <el-table-column prop="TZZYJSYC" label="特种专业技术用车"></el-table-column>
            <el-table-column prop="YWYC" label="业务用车"></el-table-column>
            <el-table-column prop="BC" label="班车"></el-table-column>
            <el-table-column prop="HQFWYC" label="后勤服务用车"></el-table-column>
            <el-table-column prop="QTYC" label="其他用车"></el-table-column>
          </el-table>
        </div>
      </el-dialog>

      <div class="block" style="margin-top: 50px;">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageSize"
          :total="total"
          :current-page="pageNo"
          @current-change="fetchData"
          @size-change="pageSizeChange"
        ></el-pagination>
      </div>
      <add ref="addComp"></add>
    </div>
  </div>
</template>
<script>
import "./index.scss";
import { viewJson } from "@/api/task";
import { applyListjson, bz } from "@/api/carbz";
import add from "./components/add";
import carconfig from "../carconfig/index";
export default {
  components: { add, carconfig },
  data() {
    return {
      //全部步骤
      steps: [
        { title: "提交申请", description: "申请修改编制" },
        { title: "审核", description: "公车处经办人审批" },
        { title: "审核", description: "公车处负责人确认" },
        { title: "修改编制", description: "公车处经办人修改编制" },
      ],
      activeStep: 0, //当前进行到到步骤
      serverProjectName: "",
      currentStatus: "0",
      tabPosition: "top",
      search: "",
      currentPage: 1,
      pageNo: 1,
      pageSize: 10,
      listData: [], //全部数据
      listDataSelected: [], //选中数据
      history: [], //历史流程
      opData: null,
      tableData: [
        {
          id: 1,
          reason: "",
          time: "2020-4-9",
        },
      ],
      update: false,
      show: false,
      reason: "",
      total: 0,
      status: "first",

      cars: [
        {
          nature: "实有车辆数目",
          ZZSJGBYC: "0", //在职省级干部用车
          LTXZSJGBYC: "0", //离退休正省级干部用车
          LXFSJGBYC: "0", //离休副省级干部用车
          TXFSJGBYC: "0", //退休副省级干部用车
          DXHSWGWYC: "0", //定向化实物保障岗位用车
          JYTXYC: "0", //机要通信用车
          YJBZYC: "0", //应急用车
          JYTXYYJHYYC: "0", //机要通信与应急合一用车
          LTXGBGLJGYC: "0", //离退休干部管理机构用车
          DYSCDCYC: "0", //调研视察督察用车
          ZWJDYC: "0", //政务接待用车
          ZFZQYC: "0", //执法执勤用车
          TZZYJSYC: "0", //特种专业技术用车
          YWYC: "0", //业务用车
          BC: "0", //班车
          HQFWYC: "0", //后勤服务用车
          QTYC: "0", //其他用车
        },
        {
          nature: "现有编制数目",
          ZZSJGBYC: "0",
          LTXZSJGBYC: "0",
          LXFSJGBYC: "0",
          TXFSJGBYC: "0",
          DXHSWGWYC: "0",
          JYTXYC: "0",
          YJBZYC: "0",
          JYTXYYJHYYC: "0",
          LTXGBGLJGYC: "0",
          DYSCDCYC: "0",
          ZWJDYC: "0",
          ZFZQYC: "0",
          TZZYJSYC: "0",
          YWYC: "0",
          BC: "0",
          HQFWYC: "0",
          QTYC: "0",
        },
      ],
      reverse: true,
    };
  },
  created() {
    //管理员不能修改编制
    // if (this.$store.getters.userInfo.usertype == 1) {
    //   this.$alert("管理员不能修改编制", "错误提示", {
    //     confirmButtonText: "确定",
    //     callback: (action) => {
    //       this.$router.replace({ name: "dashboard" });
    //     },
    //   });
    // } else {
    //   this.fetchData();
    //   this.fetchBzData();
    // }
    this.fetchData();
    this.fetchBzData();
    this.serverProjectName = this.VUE_APP_BASE_API;
  },
  methods: {
    ///获取本单位到车辆信息
    async fetchBzData() {
      let data = await bz();
      console.log(data);
      this.show = true;
      this.opData = data.bz.carbz;
      let newConfig = {};
      for (let key in data.bz.config) {
        let newkey = key.toUpperCase();
        newConfig[newkey] = data.data.config[key];
      }
      for (let key in this.cars[0]) {
        let realkey = key + "SY";
        if (typeof newConfig[realkey] != "undefined") {
          this.cars[0][key] = newConfig[realkey];
        }
      }
      for (let key in this.cars[1]) {
        let realkey = key + "BZ";
        if (typeof newConfig[realkey] != "undefined") {
          this.cars[1][key] = newConfig[realkey];
        }
      }
    },
    //查看、审批任务
    async viewTask(d) {
      let data = await viewJson({
        tableId: d.id,
        pid: d.prcid,
        taskId: d.taskId,
        formKey: "carbz_apply",
      });
      console.log(data);
      this.show = true;
      this.opData = data.carbz;
      this.history = data.history;
      this.history.splice(0, 0);
      let newConfig = {};
      for (let key in data.config) {
        let newkey = key.toUpperCase();
        newConfig[newkey] = data.config[key];
      }
      for (let key in this.cars[0]) {
        let realkey = key + "SY";
        if (typeof newConfig[realkey] != "undefined") {
          console.log("匹配到");
          this.cars[0][key] = newConfig[realkey];
        }
      }
      for (let key in this.cars[1]) {
        let realkey = key + "BZ";
        if (typeof newConfig[realkey] != "undefined") {
          this.cars[1][key] = newConfig[realkey];
        }
      }
      //判断当前进行到哪一步
      if (this.history.length > 0) {
        this.steps.forEach((step, index) => {
          if (
            this.history[this.history.length - 1].taskName.indexOf(
              step.description
            ) != -1
          ) {
            this.activeStep = index + 1;
          }
        });
      }
    },
    pageSizeChange(newSize) {
      this.pageSize = newSize;
      this.pageNo = 1;
      this.fetchData();
    },
    async fetchData(pageNo) {
      if (pageNo) {
        this.pageNo = pageNo;
      }
      let params = { pageNo: this.pageNo, pageSize: this.pageSize };
      if (this.currentStatus != 0 ) {
        params.status = this.currentStatus;
      }
      let data = await applyListjson(params);
      this.listData = data.data;
      this.total = data.total;
      this.listDataSelected.splice(0);
    },
    handleClick(tab, event) {
      console.log(tab, event);
      if (this.currentStatus == "3") {
        console.log(1)
        this.$emit("finish");
      } else {
        this.pageNo = 1;
        this.fetchData();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    statusChange(tab, event) {
      console.log(tab, event);
    },
  },
};
</script>